import useWebAnimations from "@wellyshen/use-web-animations";
import React, { useEffect } from "react";

export default function Pillar(props) {
  const { ref, animate } = useWebAnimations();

  useEffect(() => {
    animate({
      keyframes: { transform: `translate(${props.pos * 40}px,0px)` },
      animationOptions: { duration: 300, fill: "forwards" },
    });
  }, [props.pos]);

  return (
    <div
      style={{
        position: "absolute",
        // marginLeft: 30,

        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        fontSize: "20px",
      }}
      ref={ref}
    >
      <div
        style={{
          // transform: `translate(${props.pos * 100}px,0px)`,
          height: props.height,
          width: "30px",
          // flexDirection: "row",
          // justifyContent: "center",
          // alignItems: "center",
          backgroundColor:
            props.color == 1
              ? "rgb(173, 216, 230)"
              : props.color == 2
              ? "green"
              : "rgb(255, 165, 0)",
        }}
      ></div>
      {props.number}
    </div>
  );
}
